<template>
  <view class="">
    <view class="page-box">
      <view class="box-top">
        <view class="top-name">
          相关认证
        </view>
        <view class="top-more">
          <u-icon color="#B8B8B8" class="more-icon" size="26" name="question-circle"></u-icon>
          <view class="more-text">点亮的为认证的</view>
        </view>
      </view>
      <view class="box-dataList">
        <view class="dataList-item" :class="{active : detailInfo.auth_status === 3}">
          <view class="item-pic">
            <image class="pic-image" mode="aspectFit" :src="`${$domain}/static/icons/guest/shiming.svg`"></image>
          </view>
          <view class="item-name">
            实名
          </view>
        </view>
        <view class="dataList-item" :class="{active : detailInfo.xLstatus === 3}">
          <view class="item-pic">
            <image class="pic-image" mode="aspectFit" :src="`${$domain}/static/icons/guest/xueli-1.svg`"></image>
          </view>
          <view class="item-name">
            学历
          </view>
        </view>
        <view class="dataList-item" :class="{active : detailInfo.cc_status === 3}">
          <view class="item-pic">
            <image class="pic-image" mode="aspectFit" src="/static/icons/guest/chezi.svg"></image>
          </view>
          <view class="item-name">
            车子
          </view>
        </view>
        <view class="dataList-item" :class="{active : detailInfo.fc_status === 3}">
          <view class="item-pic">
            <image class="pic-image" mode="aspectFit" :src="`${$domain}/static/icons/guest/fangzi.svg`"></image>
          </view>
          <view class="item-name">
            房子
          </view>
        </view>
        <view class="dataList-item" :class="{active : detailInfo.dscn_status === 3}">
          <view class="item-pic">
            <image class="pic-image" mode="aspectFit" :src="`${$domain}/static/icons/guest/chengnuo.svg`"></image>
          </view>
          <view class="item-name">
            单身承诺
          </view>
        </view>
      </view>
    </view>
    <view class="page-box">
      <view class="box-top">
        <view class="top-name">
          基本资料
        </view>
      </view>
      <view class="mb-2 flex">
        <image class="mr-2 flex-shrink-0 w-[40rpx] h-[40rpx]" mode="aspectFit"
               :src="`${$domain}/static/icons/guest/qingdan.svg`"></image>
        <view class="flex items-center flex-wrap">
          <view class="page-tag mr-2 mb-2">
            月入{{ detailInfo.income }}
          </view>
          <view class="page-tag mr-2 mb-2">
            {{ detailInfo.jtqk }}
          </view>
        </view>
      </view>
      <view class="mb-2 flex">
        <image class="mr-2 flex-shrink-0 w-[40rpx] h-[40rpx]" mode="aspectFit"
               :src="`${$domain}/static/icons/guest/zhuzhi-1.svg`"></image>
        <view class="flex items-center flex-wrap">
          <view class="page-tag mr-2 mb-2">
            {{ detailInfo.house }}
          </view>
          <view class="page-tag mr-2 mb-2">
            {{ detailInfo.car }}
          </view>
        </view>
      </view>
      <view class="mb-2 flex">
        <image class="mr-2 flex-shrink-0 w-[40rpx] h-[40rpx]" mode="aspectFit"
               :src="`${$domain}/static/icons/guest/hunli.svg`"></image>
        <view class="flex items-center flex-wrap">
          <view class="page-tag mr-2 mb-2">
            {{ detailInfo.marriage }}
          </view>
        </view>
      </view>
    </view>
    <view class="page-box">
      <view class="box-top">
        <view class="top-name">
          自我介绍
        </view>
      </view>
      <view class="mb-2 text-lg text-content">
        {{ detailInfo.zwjs }}
      </view>
      <view class="flex items-center flex-wrap">
        <view class="page-tag mr-2 mb-2">
          爱好：{{ detailInfo.wdah }}
        </view>
        <view class="page-tag mr-2 mb-2">
          性格：{{ detailInfo.wdxg }}
        </view>
      </view>
    </view>
    <view class="page-box">
      <view class="box-top">
        <view class="top-name">
          Ta希望你
        </view>
      </view>
      <view class="mb-2 flex">
        <image class="mr-2 flex-shrink-0 w-[40rpx] h-[40rpx]" mode="aspectFit"
               :src="`${$domain}/static/icons/guest/qingdan.svg`"></image>
        <view class="flex items-center flex-wrap">
          <view v-if="detailInfo.zoyq_education" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_education }}
          </view>
          <view v-if="detailInfo.zoyq_house" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_house }}
          </view>
          <view v-if="detailInfo.zoyq_income" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_income }}
          </view>
          <view v-if="detailInfo.zoyq_is_hj" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_is_hj == 1 ? '喝酒' : '不喝酒' }}
          </view>
          <view v-if="detailInfo.zoyq_is_xy" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_is_xy == 1 ? '吸烟' : '不吸烟' }}
          </view>
          <view v-if="detailInfo.zoyq_jhqk" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_jhqk }}
          </view>
          <view v-if="detailInfo.zoyq_marriage" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_marriage }}
          </view>
          <view v-if="detailInfo.zoyq_max_age" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_max_age }}
          </view>
          <view v-if="detailInfo.zoyq_min_height" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_min_height }}cm - {{ detailInfo.zoyq_max_height }}cm
          </view>
          <view v-if="detailInfo.zoyq_work" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_work }}
          </view>
        </view>
      </view>
      <view class="mb-2 flex">
        <image class="mr-2 flex-shrink-0 w-[40rpx] h-[40rpx]" mode="aspectFit"
               :src="`${$domain}/static/icons/guest/liangdian.svg`"></image>
        <view class="flex items-center flex-wrap">
          <view v-if="detailInfo.zoyq_bcyq" class="page-tag mr-2 mb-2">
            {{ detailInfo.zoyq_bcyq }}
          </view>
        </view>
      </view>
    </view>
    <view class="page-box">
      <view class="box-top">
        <view class="top-name">
          Ta的联系方式
        </view>
      </view>
      <view class="" v-if="userInfo">
        <view class="page-userAuth" v-if="userInfo && userInfo.is_vip == 0">
          <view class="userAuth-bg" v-if="userInfo.is_vip == 0"></view>
          <view class="userAuth-con" @click="navTo" v-if="userInfo.is_vip == 0">
            <view class="con-btn">
              我要开通VIP
            </view>
            <view class="con-text">
              只有会员才能看Ta的联系方式哦~
            </view>
          </view>
        </view>
        <view class="box-contact" v-if="userInfo && userInfo.is_vip == 1">
          <view class="contact-one">
            <view class="one-pic">
              <image class="pic-img" mode="aspectFit" :src="`${$domain}/static/icons/public/WeChat.svg`"></image>
            </view>
            <view class="one-text">
              {{ detailInfo?.vx || '--' }}
            </view>
          </view>
          <view class="contact-one">
            <view class="one-pic">
              <image class="pic-img" mode="aspectFit" :src="`${$domain}/static/icons/public/tell.svg`"></image>
            </view>
            <view class="one-text">
              {{ detailInfo?.mobile || '' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>
<script setup lang="ts">

import MemberAuth from "@/packagesA/pages/guestDetail/components/memberAuth.vue";
import {ref} from "vue";
import {getUserInfoApi} from "@/api/new";

const userInfo = ref() as any;

const getUserInfo = async () => {
  userInfo.value = await getUserInfoApi({})
}

getUserInfo()

const props = defineProps({
  detailInfo: {
    type: Object,
    default: () => {
    }
  }
})

const navTo = () => {
  uni.navigateTo({
    url: '/packages/pages/user/vip'
  })
}
</script>
<style scoped lang="scss">
.box-dataList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;

  .dataList-item {
    color: #999999;
    font-size: 28rpx;

    .item-pic {
      margin: 0 auto 10rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
      background-color: #EEF5FF;
      display: flex;
      align-items: center;
      justify-content: center;

      .pic-image {
        width: 48rpx;
        height: 48rpx;
        transition: all .3s ease;
        filter: grayscale(100%);
        opacity: .5;
      }
    }
  }

  .active {
    .item-pic {
      .pic-image {
        filter: none;
        opacity: 1;
      }
    }
  }
}

.box-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .contact-one {
    padding: 30rpx;
    border-radius: 30rpx;
    background-color: #F5F9FF;
    font-size: 28rpx;
    color: #3D3D3D;
    text-align: center;

    .one-pic {
      margin: 0 auto 20rpx;
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;

      .pic-img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.page-tag {
  padding: 10rpx 20rpx;
  background-color: #F1F6FD;
  color: #7496C6;
  font-size: 24rpx;
  line-height: 1.2;
  border-radius: 30rpx;
}

.page-userAuth {
  position: relative;
  min-height: 200rpx;
  overflow: hidden;
  .userAuth-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.1);
    backdrop-filter:blur(10rpx);
  }
  .userAuth-con {
    width: 100%;
    position: absolute;
    padding: 30rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    .con-btn {
      display: inline-block;
      padding: 10rpx 20rpx;
      font-size: 30rpx;
      color: var(--color-primary);
      border-radius: 40rpx;
      border: 2rpx solid var(--color-primary);
    }
    .con-text {
      font-size: 28rpx;
      margin-top: 20rpx;
      color: var(--color-primary);
    }
  }
}

</style>